import Link from "next/link";

export default function Page() {
  return (
    <main>
      <h1 className="text-4xl">React Server Component (RSC)</h1>
      <ol style={{listStyle: 'decimal outside'}}>
        <li>
          lazy & Suspense
          <code style={{whiteSpace: 'pre'}}>
            {`
import { lazy } from 'react';

const MarkdownPreview = lazy(
  () => import('./MarkdownPreview.js')
);

<Suspense fallback={<Loading />}>
  <h2>Preview</h2>
  <MarkdownPreview />
</Suspense>
          `}
          </code>
        </li>
        <li>
          Streaming Server Rendering
          <p className="text-gray-400">Progressively rendering (Suspense)</p>
        </li>
        <li>缺省情况下使用 server component</li>
        <li>client component 需要特殊声明：{'"use client"'}</li>
        <Link href='/concept/abc'><li>相互嵌套</li></Link>
        <li>server-only | client-only</li>
        <li>react features in client ONLY</li>
        <li>第三方 npm lib</li>
        <li>nextjs.org</li>
        <a target="_blank" href="https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns">
          <p>各自优势及应用</p>
        </a>
      </ol>
    </main>
  )
}
